<template>
  <el-dialog
    :title="formData.id ? '修改权限':'添加权限'"
    :visible.sync="showDialog"
    width="45%"
    @close="close">
    <!-- 绘制表单 -->
    <el-form :model="formData" ref="form" :rules="formRules" label-width="140px"  size="small">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="状态" >
        <el-switch v-model="formData.enVisible" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button size="small" @click="showDialog = false">Cancel</el-button>
      <el-button size="small" type="primary" @click="btnOk">OK</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addPermissionApi, editPermissionApi, getPermissionInfoApi } from '@/api/permission'
  export default {
    name:'addPermForm',
    data() {
      return {
        formData: {
          "name": "",
          "code": "",
          "description": "",
          "type":"",
          "pid": "",
          "enVisible":0
        },
        formRules:{
           name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
          code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
        },
        showDialog:false
      }
    },
    methods: {
      // 提交事件
      async btnOk() {
        // 表单校验
        await this.$refs.form.validate()
        // 加工数据
        // 发送请求
        this.formData.id ? await editPermissionApi(this.formData) :  await addPermissionApi(this.formData)
        // 提示消息
        this.$message.success('操作成功')
        // 关闭
        this.showDialog = false
        // 更新
        this.$emit('updateList')
      },
      // 回显方法
      async reviewData(id){
        let res = await getPermissionInfoApi(id)
        this.formData = res
        this.showDialog = true
      },
      close(){
        this.$refs.form.clearValidate()
        this.formData = {
          "name": "",
          "code": "",
          "description": "",
          "type":"",
          "pid": "",
          "enVisible":0
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
</style>